<template>
    <div>
        <div class="headebox">
            <div class="left">
                <span class="iconfont icon-arrow-left-bold" @click="$router.go(-1)"></span>
            </div>
            <div class="right">
                <input 
                type="text" 
                name="" 
                id="" 
                placeholder="搜索歌曲、歌手"
                v-model="content"
                @change="search"
                >
            </div>
        </div>        
        <div class="first" v-show=" falsesearch">
            <div class="hotsea">
                <span>热门搜索</span>
                <ul>
                    <li v-for="(item,index) in hotsearch" :key = "index" @click="pushContent($event)"><span>{{item.first}}</span></li>
                </ul>
            </div>           
            <div class="hissea">
                <div class="top">
                    搜索历史
                    <span class="iconfont icon-shanchu" @click="dellist"></span>
                </div>
                <ul>
                    <li v-for="(item,index) in searchcontent" :key = "index">
                        {{item}}<span class="iconfont icon-close-bold" @click="del(index)"></span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="second" v-show="!falsesearch">
            <div class="searchlists">
                <h1>最佳匹配</h1>
                <div class="songer">
                    <div class="img">
                        <img :src="pic" alt="">
                    </div>
                    <div class="list" @click="getsongerLis(contentlists[0].ar[0].id)">
                        <h2>
                            歌手：
                        </h2>
                        <h3>
                            {{songer}}
                        </h3>                        
                    </div>
                </div>
                <div class="recommend">
                    <div class="img">
                        <img :src="SongSheet.coverImgUrl" alt="">
                    </div>
                    <div class="list" @click="goMusiclist(SongSheet.id)">
                    <h2>
                        歌单：
                    </h2>
                    <h3>
                        {{SongSheet.name}}
                    </h3>
                    </div>
                </div>
            </div>
            <div class="searlists">
                <ul>
                    <li v-for="(item,index) in contentlists" :key="index">
                        <div class="list" @click="playmusic(item.id,item.name,item.ar,item.al.picUrl)">
                            <h2>{{item.name}}</h2>
                            <h3>
                                <span v-for="(key,i) in item.ar" :key = "i">{{key.name}} </span>    
                            </h3>                            
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    
</template>

<script>
    import{getHotSearch,getSearchcontent,getsonger,getSongSheet}  from '../api/search'
    export default {
        data() {
            return {
                hotsearch:"",
                falsesearch:true,
                content:"",//输入框内容
                contentlists:"",//获取搜索歌名
                pic:"",//歌曲图片
                songer:"",
                // searchcontent:[],//历史搜索
                sheetId:"",
                SongSheet:""//匹配歌单
            }
        },
        methods: {
            getHotSearchFun(){
                getHotSearch().then(data=>{
                    console.log(data);
                    if (data.code == 200) {
                        this.hotsearch = data.result.hots
                    }
                    // console.log(this.hotsearch);
                    // console.log(data);
                })
                
            },
            search(){
                if (this.content) {
                    getSearchcontent({keywords:this.content}).then(data=>{
                        this.contentlists = data.result.songs;
                        // console.log("搜索内容",this.contentlists);
                        this.songer = data.result.songs[0].ar[0].name;
                        // console.log("获取歌手名字",this.songer);
                        this.sheetId = this.contentlists[0].id;
                        getSongSheet({id:this.sheetId}).then(data=>{
                            // console.log("获取精选歌单",data.playlists[0]);
                            this.SongSheet = data.playlists[0]  
                        })
                        return this.contentlists[0].ar[0].id;
                    }).then(id=>{
                        getsonger({id:id}).then(data=>{
                            // console.log("获取歌手详情",data);
                            this.pic = data.data.artist.cover;
                        })
                    })
                    this.falsesearch = false;     
                    // console.log(this.content);
                    // console.log(this.searchcontent);
                    if(this.searchcontent.indexOf(this.content) == -1){
                        this.searchcontent.push(this.content);  
                    }else{
                        return this.searchcontent;
                    }
                    
                }else{
                    this.falsesearch = true
                }
                // this.searchSetItem.save(this.searchcontent);
                // console.log("搜索历史",this.searchcontent);
                this.$store.commit("searchcontentFun",this.searchcontent)
            },  
            // 播放音乐
            playmusic(id,name,ar,coverImgUrl){
                let playMusicData = {
                    coverImgUrl,
                    id,
                    name,
                    ar,
                    tracks:this.contentlists
                }
            // 数据存储
            // this.$store.commit("searchcontentFun",playMusicData);
            this.$store.commit("musicDataFun",playMusicData);
            let musiclistts = JSON.parse(JSON.stringify(playMusicData));
            this.$store.commit("musiclisttsFun",musiclistts);
        } ,


        // 热门搜索点击上传输入款
        pushContent(event){
            // console.log(event.path[0].innerHTML);
            this.content = event.path[0].innerText;
            this.search();
        },


        // 歌手显示热门歌曲
        getsongerLis(id){
            console.log(this.contentlists[0].ar[0]);
            console.log(id);
            this.$router.push({
                path:"/sing/singlist",
                query:{
                    id,
                }
            })
        },


        // 歌单播放//详情
        goMusiclist(id){
            console.log(id);
            this.$router.push({
                path:'/recommend/musiclist',
                query:{
                    id
                }
            })
            console.log(this.$router);
        },


        // 删除历史搜索
        del(index){
            console.log(index);
            this.searchcontent.splice(index,1);
            // this.searchSetItem.save(this.searchcontent);
            this.$store.commit("searchcontentFun",this.searchcontent)
        },
        dellist(){
                this.searchcontent.splice(0,this.searchcontent.length)
                // this.searchSetItem.save(this.searchcontent);
                this.$store.commit("searchcontentFun",this.searchcontent)
        }
        },
        computed:{
            searchcontent(){
                return this.$store.state.searchcontent;
            }
        },
        created(){
            this.getHotSearchFun();
            //获取数据
            // this.searchcontent = this.searchSetItem.fetch();
            // window.addEventListener("searchSet",()=>{
            //     this.searchcontent = this.searchSetItem.fetch();
            // })
        },
    }
</script>

<style lang="less" scoped>
    .headebox{
        height: 100px;
        width: 100%;
        background-color: #BCCC8D;
        display: flex;
        .left{
            flex: 0 0 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            .iconfont{
                font-size: 40px;
                color: #FFFFFF;
            }
        }
        .right{
            flex: 1;
            line-height: 100px;
            input{
                background-color: transparent;
                color: #fff;
                border: none;
                border-bottom:1px solid #fff;
                width: 510px;
                height: 50px;
                &::-webkit-input-placeholder{
                    color: #fff;
                    }
                }
            }
        }
    .first{
        .hotsea{
            padding: 35px 40px ;
            // background-color: thistle;
            // text-align: center;
            span{
                font-size: 20px;
                color: #909191;
            }
            ul{
                width: 560px;
                height: 100px;
                // display: flex;
                li{
                    // flex: 0 0 100px;
                    // width: 100px;
                    // height: 40px;
                    float: left;
                    line-height: 40px;
                    margin-right: 12px;
                    border: 2px solid #D0D1D0;
                    text-align: center;
                    border-radius: 7px;
                    box-sizing: border-box;
                    margin-top: 10px;
                    span{
                        color: #3E403F;
                        margin: 0 6px;
                    }
                }
            }
        }
        .hissea{
            padding: 12px 40px;
            // background-color: tomato;
            .top{
                font-size: 18px;
                color: #797A7A;
                span{
                    float: right;
                    font-size: 22px;
                    color: #313434;
                }
            }
            ul{
                width: 560px;
                margin-top:12px ;
                li{
                    height: 56px;
                    line-height: 56px;
                    font-size: 20px;
                    color: #313333;
                    span{
                        float: right;
                    }
                }
            }
        }
    }
    .second{
        font-size: 18px;
        width: 100%;
        background-color: #F2F3F4;
        .searchlists{
            h1{
                // font-weight: normal;
                font-size: 18px;
                color: #D7473C;
                height: 45px;
                line-height: 45px;
                text-indent: 1em;
            }
            .songer{
                display: flex;
                border-bottom: 2px solid #E5E6E6;
                height: 106px;
                .img{
                    flex: 0 0 80px;
                    height: 80px;
                    width: 80px;
                    margin-left: 28px;
                    margin-top: 15px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .list{
                    display: flex;
                    height: 106px;
                    line-height: 106px;
                    margin-left: 23px;
                    h2{
                        display: inline-block;
                        font-weight: normal;
                        font-size: 22px;
                    }
                    h3{
                        
                        font-weight: normal;
                        font-size: 18px;

                    }
                }
            }
            .recommend{
                display: flex;
                border-bottom: 2px solid #E5E6E6;
                height: 106px;
                .img{
                    flex: 0 0 80px;
                    height: 80px;
                    margin-left: 28px;
                    margin-top: 15px;
                    img{
                        width: 80px;
                        height: 80px;
                    }
                }
                .list{
                    display: flex;
                    height: 106px;
                    line-height: 106px;
                    margin-left: 23px;
                    h2{
                        font-weight: normal;
                        font-size: 22px;
                    }
                    h3{
                        font-weight: normal;
                        font-size: 18px;
                    }
                }               
            }
        }
        .searlists{
            ul{
                width: 100%;
                li{
                    height: 86px;
                    border-bottom: 2px solid #E5E6E6;
                    .list{
                        margin-left:28px;
                        padding: 10px 0;
                        h2{
                            height: 35px;
                            line-height: 35px;
                            font-weight: normal;
                            font-size: 20px;
                            color: #0C0D0F;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            width: 400px;
                            display: inline-block;
                        }
                        h3{
                            height: 32px;
                            line-height: 32px;
                            font-size: 15px;
                            color: #7F8081;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            width: 400px;
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }
</style>